<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #warp{
            width: 1000px;
            margin: 0 auto;
            /*position: relative;*/
            /*border: 1px solid red;*/
            height: 400px;
        }
        .logo{
            position: relative;
            left: 134px;
        }
        .put{
            width: 800px;
            position: absolute;
        }
        .put>input{
            width: 546px;
            height: 42px;
        }
        .but{
            height: 42px;
            width: 100px;
            color: white;
            background-color: blue;
            font-size: 16px;
            border-radius: 5px;
        }
        #show{
            width: 500px;
            height: 100px;
            /*background-color: antiquewhite;*/
            position: absolute;
            top: 45px;
            border: 1px solid white;
            border-top: 0px solid white;
            display: none;
        }
        #show li{
            list-style-type: none;
        }
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <div id="warp">
        <div class="logo"><img src="img/baidu.jpg"></div>
        <div class="put">
            <input type="text" name="search" id="search">
            <button class="but">百度一下</button>
            <div id="show">
                <ul>

                </ul>
            </div>
        </div>
    </div>
    <script>
        //当键盘抬起获取输入框中的值
        $("#search").keyup(function () {
            var val=$("#search").val();
            console.log(val);
            $.post(
                "search?name="+val,
                function (msg) {
                    if (msg!=null&&msg.length>0){
                        $("#show>ul").empty();//清空原来的内容
                        $.each(msg,function () {
                            $("#show>ul").append("<li>"+this+"</li>");
                            $("#show").show();//显示div
                        })
                    }else {
                        $("#show").hide();
                    }
                },
                "json"
            )
        })
    </script>
</body>
</html>